<template>
	<view class="content">
		<view class="headerbg">
			<view class="back-box" @click="goback">
				<image :src="proxy.serverimageUrl + 'back.png'" mode=""></image>
				<view class="text">
					会员详情
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="member-content">
			<view class="bgcontent">

			</view>
			<view style="position: relative;z-index: 5;">
				<view class="publicstyle">
					<view class="card">
						<!-- <image class="card-share" :src="proxy.serverimageUrl + 'mypage/share.png'" mode=""></image> -->
						<button class="card-share" open-type="share" @click="sharechange"
							:data-shareInfo='shareInfo'></button>
						<view class="member-item">
							<view class="item-left">
								<image v-if="Memberobj.avatar" :src="Memberobj.avatar" mode=""></image>
								<image v-else :src="proxy.serverimageUrl + 'mypage/avataricon.png'" mode=""></image>
							</view>
							<view class="item-right">
								<view class="title-name">
									<view class="nametext">
										{{Memberobj.memberName}}
									</view>
									<image v-if="Memberobj.employmentSituation == '会长'"
										:src="proxy.serverimageUrl+'member/1.png'" mode=""></image>
									<image v-if="Memberobj.employmentSituation == '副会长'"
										:src="proxy.serverimageUrl+'member/2.png'" mode=""></image>
									<image v-if="Memberobj.employmentSituation == '理事'"
										:src="proxy.serverimageUrl+'member/3.png'" mode=""></image>
									<image v-if="Memberobj.employmentSituation == '会员'"
										:src="proxy.serverimageUrl+'member/4.png'" mode=""></image>
								</view>
								<view class="labelBox">
									<span class="labelBox-item" v-for="(item,index) in Memberobj.mainDutieslist"
										:key="index">
										{{item.organization}}
										{{item.duties}}
									</span>
								</view>
								<view class="duties">
									{{Memberobj.duties}}
								</view>
								<view class="company">
									{{Memberobj.workUnit}}
								</view>
							</view>
						</view>
						<view class="Otherinformation">
							<view class="Otherinformation-item" @click="gomembershar(1,Memberobj.mid)">
								<p class="p1">{{Memberobj.browseNumber}}</p>
								<p class="p2">会员访问</p>
							</view>
							<view class="Otherinformation-item" @click="gomembershar(3,Memberobj.mid)">
								<p class="p1">{{Memberobj.sharingFrequency}}</p>
								<p class="p2">会员分享</p>
							</view>
							<view class="Otherinformation-item" @click="gomembershar(2,Memberobj.mid)">
								<p class="p1">{{Memberobj.collectionNumber}}</p>
								<p class="p2">会员收藏</p>
							</view>
						</view>
						<view class="card-bottom">
							<image class="bottombg" :src="proxy.serverimageUrl + 'member/card-botm.png'" mode="">
							</image>
							<view class="bottom-textBox">
								<view class="bottom-textBox-text" @click="collchange">
									收藏名片
								</view>
								<image class="gang" :src="proxy.serverimageUrl+'member/xiekang.png'" mode=""></image>
								<view class="bottom-textBox-text" @click="modalshow = true">
									联系方式
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="dutiesBox publicstyle">
					<my-title :title='title1' :imageshow='false'></my-title>
					<view class="dutiesBox-item" v-if="Memberobj.mainDutiesDtos && Memberobj.mainDutiesDtos.length > 0">
						<view class="item-content" v-for="(item,index) in Memberobj.mainDutiesDtos" :key="index">
							<view class="content-left">
								<image :src="proxy.serverimageUrl + 'mypage/tabicon.png'" mode=""></image>
							</view>
							<view class="content-right">
								<p class="title">{{item.organization}}</p>
								<p class="subtitle">{{item.duties}}</p>
							</view>
						</view>
					</view>

				</view>
				<view class="Information publicstyle">
					<my-title :title='title2' :imageshow='false'></my-title>
					<view class="Information-item">
						<view class="item-top">
							<image :src="proxy.serverimageUrl+ 'member/qiyeicon.png'" mode=""></image>
							<view class="item-top-right">
								<p class="p1">{{Memberobj.workUnit}}</p>
								<p class="p2">职务：<span style="color: #255EDD;">{{Memberobj.duties}}</span></p>
							</view>
						</view>
						<view class="xinxibox">
							<image :src="proxy.serverimageUrl + 'member/xinxiicon.png'" mode=""></image>
							<view class="text">
								{{Memberobj.industrieString}}
							</view>
						</view>
						<view class="xinxibox">
							<image :src="proxy.serverimageUrl + 'member/dizhiicon.png'" mode=""></image>
							<view class="text">
								{{Memberobj.communicationAddress}}{{Memberobj.address}}
							</view>
						</view>
					</view>
				</view>
				<view class="personalhonor publicstyle">
					<my-title :title='title3' :imageshow='false'></my-title>
					<view class="personalhonor-content">
						<view class="honor">
							<p class="title">个人简介</p>
							<view style="display: flex; overflow: hidden;">
								<!-- <input id="exp1" @click.stop ref="inputexp" class="exp" type="checkbox" /> -->
								<view class="text" v-if="Memberobj.resume" :style="{maxHeight:Maxheight+'em'}">
									<label class="btn" :data-before="becontent" v-if="btnshow" @tap="clicklabel"
										:data-attr="attrcontent"></label>
									<!-- <view> -->
									{{Memberobj.resume}}
									<!-- </view> -->
								</view>
								<view class="" v-else>
									无
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="personalhonor publicstyle">
					<my-title :title='title4' :imageshow='false'></my-title>
					<view class="personalhonor-content">
						<view class="honor">
							<p class="title">企业简介</p>
							<view style="display: flex; overflow: hidden;">
								<!-- <input id="exp1" @click.stop ref="inputexp" class="exp" type="checkbox" /> -->
								<view class="text" v-if="Memberobj.companyIntroduction"
									:style="{maxHeight:Maxheights+'em'}">
									<label class="btn2" :data-befe="becontents" v-if="btnshow" @tap="clicklabels"
										:data-aft="attrcontents"></label>
									<!-- <view> -->
									{{Memberobj.companyIntroduction}}
									<!-- </view> -->
								</view>
								<view class="" v-else>
									无
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 40rpx;">

				</view>
			</view>
			<up-modal :show="modalshow" showCancelButton @cancel="modalcancel" :title="modaltitle"
				@confirm="modalconfirm" :content='modalcontent'></up-modal>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getMemberInfo,
		collections,
		getshare
	} from '../../utils/api.js'
	/*传输给组件的参数 title1-5 引用组件5次*/
	const mid = ref('')
	const cmid = ref(uni.getStorageSync('mid'))
	onLoad((o) => {
		if (o.mid) {
			mid.value = o.mid
			getMember(o.mid)
		}
	})
	onShow(() => {

	})
	/*点击分享调用接口*/
	const sharechange = () => {
		if(cmid.value != ''){
			let params = {
				mid: mid.value,
				smid: cmid.value
			}
			getshare(params).then(res => {
				console.log(res);
			})
		}else{
			uni.showToast({
			title: '没有会员信息',
			icon: 'error'
		})
		}
	}
	/*分享出去的数据*/
	const shareInfo = ref({
		title: '会员分享',
		path: '/subpage/menberdetail/index?mid' + mid.value, // 分享路径
		imageUrl: '', // 分享图片
		desc: '',
		content: ''
	})
	/*跳转到会员分享收藏页面*/
	const gomembershar = (type, mid) => {
		if (mid) {
			uni.navigateTo({
				url: '/subpages/Membersharing/index?type=' + type + '&mid=' + mid
			})
		} else {
			uni.showToast({
				title: '没有会员信息',
				icon: 'error'
			})
		}

	}
	/*返回上一页*/
	const goback = () => {
		uni.navigateBack()
	}
	/*会员详细信息*/
	const Memberobj = ref({})
	const getMember = (mid) => {
		getMemberInfo(mid).then(res => {
			Memberobj.value = res.data
			if (Memberobj.value.mainDutiesDtos.length > 2) {
				Memberobj.value.mainDutieslist = Memberobj.value.mainDutiesDtos.slice(0, 2)
			} else {
				Memberobj.value.mainDutieslist = Memberobj.value.mainDutiesDtos
			}
			// modalcontent.value = res.data.secretaryPhone
			textnum(res.data.resume, 1)
			textnum(res.data.companyIntroduction, 2)
		})
	}
	/*弹出框的操作*/
	const modalcancel = () => {
		modalshow.value = false
	}
	//点击弹出框确定按钮跳转手机拨打电话页面
	const modalconfirm = () => {
		modalshow.value = false
		uni.makePhoneCall({
			phoneNumber: '13500303319' // 电话号码
		});
	}
	const modalshow = ref(false)
	const modaltitle = ref('联系方式')
	const modalcontent = ref('该会员手机号仅能通过秘书处咨询')
	//*收藏会员/
	const collchange = () => {
		let params = {
			cmid: uni.getStorageSync('mid'),
			mid: mid.value
		}
		collections(params).then(res => {
			if (res.code == 200) {
				setTimeout(() => {
					uni.showToast({
						title: res.data,
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.hideToast();
					}, 1000)
				}, 0)
			}else if(res.code == 500){
				uni.showToast({
					title: '请先登录',
					duration: 1000,
					icon: 'error'
				})
			}
		})
	}
	/*公共组件信息以及会员简介展开定义的一些变量*/
	const imageshow = ref(false)
	
	const attrcontent = ref("展开")//显示文字
	const becontent = ref("...")//显示文字
	const Maxheight = ref(4.5)//显示高度
	const attrcontents = ref("展开")//显示文字
	const becontents = ref("...")//显示文字
	const Maxheights = ref(4.5)//显示高度
	const title1 = ref('社会职务')//组件title
	const title2 = ref('企业信息')//组件title
	const title3 = ref('个人简介与荣誉')//组件title
	const title4 = ref('企业简介与荣誉')//组件title
	const btnshow = ref(false)
	const contentnum = ref(0)//默认简介字数
	const contentnums = ref(0)//默认简介字数
	/*计算会员简介字数 超过变化高度*/
	const textnum = (str, type) => {
		let length = 0;
		let num = 0
		for (let i = 0; i < str.length; i++) {
			const c = str.charCodeAt(i);
			length += (c >= 0 && c <= 128) ? 1 : 2;
		}
		if (length < 50) {
			btnshow.value = false
		} else {
			btnshow.value = true
			if (type == 1) {
				contentnum.value = (length - 45) / 25 * 1.5
			} else {
				contentnums.value = (length - 45) / 25 * 1.5
			}
		}

	}
	/*点击会员简介 展开或者收起*/
	const clicklabel = () => {
		// Maxheight.value = Maxheight.value == 4.5 ? contentnum.value : 4.5
		if (Maxheight.value == 4.5) {
			becontent.value = ''
			attrcontent.value = '收起'
			Maxheight.value = contentnum.value
		} else {
			becontent.value = '...'
			attrcontent.value = '展开'
			Maxheight.value = 4.5
		}
	}
	const clicklabels = () => {
		if (Maxheights.value == 4.5) {
			becontents.value = ''
			attrcontents.value = '收起'
			Maxheights.value = contentnums.value
		} else {
			becontents.value = '...'
			attrcontents.value = '展开'
			Maxheights.value = 4.5
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 750rpx;
		padding-top: 217rpx;
		background: #F4F5F8;
		height: 100vh;

		.publicstyle {
			padding: 0 40rpx;
		}

		.headerbg {
			width: 750rpx;
			height: 216rpx;
			padding-top: 114rpx;
			padding-left: 40rpx;
			position: fixed;
			top: 0;
			z-index: 1;
			background: linear-gradient(90deg, #6594FD, #2854B7);

			.back-box {
				display: flex;
				align-items: center;

				image {
					width: 18rpx;
					height: 34rpx;
				}

				.text {
					font-family: Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 36rpx;
					margin-left: 11rpx;
					color: #F7F7F9;
				}
			}
		}

		.member-content {
			width: 100%;
			box-sizing: border-box;
			// padding:0 40rpx;
			position: relative;
			z-index: 2;
			top:-1rpx;
			height: calc(100vh - 220rpx);

			.bgcontent {
				position: absolute;
				top: 0px;
				z-index: 2;
				width: 100%;
				height: 252rpx;
				background: linear-gradient(90deg, #6594FD, #2854B7);
			}

			.card {
				border-radius: 20rpx;
				width: 100%;
				background-color: #FFFFFF;
				padding: 50rpx 0rpx 0;
				position: relative;

				.card-share {
					position: absolute;
					top: 0;
					right: 0;
					width: 146rpx;
					height: 60rpx;
					background-image: url('http://1001.zmxeye.com/youthAssociation/static/mypage/share.png');
					/* 替换为你的图片路径 */
					background-size: cover;
					/* 背景图覆盖整个按钮 */
					background-position: center;
					/* 背景图居中 */
					color: #fff;
					/* 文字颜色 */
					border: none;
					/* 去除边框 */
					// padding: 10px 20px; /* 内边距 */
					outline: none;
					/* 去除点击后的边框 */
					background-color: #ffffff;
					border-top-right-radius: 20rpx;
				}

				.card-share::after {
					border: none;
				}

				.member-item {
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					padding: 0 35rpx;

					.item-left {
						display: flex;
						align-items: center;
						justify-content: center;
						border: 4rpx solid #D3E0FF;
						border-radius: 50%;

						image {
							width: 118rpx;
							height: 118rpx;
							border-radius: 50%;
						}
					}

					.item-right {
						margin-left: 28rpx;

						.title-name {
							display: flex;
							align-items: center;

							.nametext {
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 34rpx;
								color: #252525;
							}

							image {
								width: 104rpx;
								height: 43rpx;
								margin-left: 14rpx;
							}
						}

						.labelBox {
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							.labelBox-item {
								margin-top: 14rpx;
								background: #E6EEFF;
								padding: 8rpx 12rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 22rpx;
								color: #2A55B7;
								margin-right: 20rpx;
							}
						}

						.duties {
							margin-top: 18rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #BBC0CA;
						}

						.company {
							margin-top: 11rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #BBC0CA;
						}
					}
				}

				.Otherinformation {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 55rpx;
					padding: 0 35rpx;

					.Otherinformation-item {

						text-align: center;

						.p1 {
							font-family: DIN;
							font-weight: bold;
							font-size: 36rpx;
							color: #363636;
						}

						.p2 {
							margin-top: 17rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #979BA2;
						}
					}
				}

				.card-bottom {
					margin-top: 33rpx;
					width: 100%;
					position: relative;
					height: 92rpx;

					.bottombg {
						width: 100%;
						height: 92rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}

					.bottom-textBox {
						padding: 0 30rpx;
						position: relative;
						z-index: 2;
						display: flex;
						align-items: center;
						height: 100%;
						justify-content: space-around;

						.bottom-textBox-text {
							font-family: Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 30rpx;
							color: #F7F7F9;
						}

						.gang {
							width: 32rpx;
							height: 43rpx;
						}
					}
				}
			}

			.dutiesBox {
				margin-top: 57rpx;

				.dutiesBox-item {
					margin-top: 34rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.item-content {
						display: flex;
						align-items: center;
						width: 326rpx;
						height: 160rpx;
						padding: 30rpx 26rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						margin-bottom: 10rpx;

						.content-left {
							width: 47rpx;
							height: 49rpx;

							image {
								width: 47rpx;
								height: 49rpx;
							}
						}


						.content-right {
							margin-left: 20rpx;

							.title {
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 26rpx;
								color: #363636;
							}

							.subtitle {
								margin-top: 18rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #B5B5B5;
							}
						}
					}
				}
			}

			.Information {
				margin-top: 50rpx;

				.Information-item {
					margin-top: 30rpx;
					padding: 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.item-top {
						display: flex;
						align-items: center;
						position: relative;
						margin-bottom: 48rpx;

						image {
							width: 100rpx;
							height: 100rpx;
						}

						.item-top-right {
							margin-left: 17rpx;

							.p1 {
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 30rpx;
								color: #252525;
							}

							.p2 {
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #252525;
							}
						}
					}

					.item-top::after {
						content: '';
						width: 100%;
						height: 1rpx;
						background: #E2E6EE;
						bottom: -17rpx;
						left: 0;
						position: absolute;
					}

					.xinxibox {
						display: flex;
						align-items: center;
						margin-top: 14rpx;

						image {
							width: 26rpx;
							height: 27rpx;
						}

						.text {
							margin-left: 11rpx;
							width: 560rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #4B4B4B;
						}
					}
				}
			}

			.personalhonor {
				margin-top: 40rpx;

				.personalhonor-content {
					margin-top: 26rpx;
					padding: 41rpx 37rpx;
					background: #FFFFFF;
					border-radius: 20px;

					.title {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 30rpx;
						color: #303030;
					}

					.honor {
						.text {
							margin-top: 27rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #979BA2;
							overflow: hidden;
							text-overflow: ellipsis;
							text-align: justify;
							/* display: flex; */
							/*   display: -webkit-box;
							  -webkit-line-clamp: 3;
							  -webkit-box-orient: vertical; */
							position: relative;
							line-height: 1.5;
							// max-height: 4.5em;
							transition: .3s max-height;
						}

						.text::before {
							content: '';
							float: right;
							height: calc(100% - 36rpx);
						}

						// .text::after {
						// 	content: '';
						// 	width: 999vw;
						// 	height: 999vw;
						// 	position: absolute;
						// 	box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
						// 	margin-left: -100px;
						// }

						.btn {
							float: right;
							clear: both;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 26rpx;
							color: #2854B7;
							margin-left: 20px;
							position: relative;
						}

						.btn::after {
							content: attr(data-attr);
							/*采用content生成*/
						}

						.btn::before {
							content: attr(data-before);
							position: absolute;
							left: -5px;
							color: #333;
							transform: translateX(-100%)
						}

						.btn2 {
							float: right;
							clear: both;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 26rpx;
							color: #2854B7;
							margin-left: 20px;
							position: relative;
						}

						.btn2::after {
							content: attr(data-aft);
							/*采用content生成*/
						}

						.btn2::before {
							content: attr(data-befe);
							position: absolute;
							left: -5px;
							color: #333;
							transform: translateX(-100%)
						}
					}

					.kong {
						margin-top: 50rpx;
						width: 100%;
						height: 1rpx;
						background-color: #E2E6EE;
					}

					.Awards {
						margin-top: 34rpx;

						.Awards-item {
							margin-top: 28rpx;
							display: flex;
							align-items: center;

							.item-left {
								width: 10rpx;
								height: 10rpx;
								background-color: #979BA2;
								border-radius: 50%;
							}

							.item-right {
								margin-left: 20rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 28rpx;
								color: #979BA2;
							}
						}
					}
				}
			}
		}
	}
</style>